<script setup lang="ts">
import { ModalUtil } from '/@lib/utils/modal.ts'
import { useModalStatus } from '/@lib/hooks/useModalStatus.ts'
import { useLoading } from '/@lib/hooks/useLoading.ts'
import { useForm } from '/@lib/hooks/useForm.ts'
import { sys_normal_disable } from '/@/const/Options.ts'
import { ApiSysDept } from '/@/api/system/sysDept'
import SelectUser from './components/SelectUser.vue'

const { loading, showLoading, hideLoading } = useLoading()
const { modalVisible, modalTitle, showModal, hideModal, setModalTitle } = useModalStatus()
const formRef = ref()
const { form, resetForm } = useForm({
  deptId: undefined,
  parentId: undefined,
  deptName: undefined,
  deptCategory: undefined,
  sortNum: 0,
  leader: undefined,
  // leader: 3,
  phone: undefined,
  email: undefined,
  status: '0'
})
const formRules = {
  parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
  deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
  orderNum: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
  email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
  phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }]
}
const closeCancel = () => {
  formRef.value?.resetFields()
  resetForm()
  hideModal()
}
const deptOptions = ref<any[]>([])

/** 打开 Modal 操作 */
const openAdd = async (row: any, listTree: any) => {
  showModal()
  setModalTitle('添加部门')
  if (row) {
    form.parentId = row.deptId
  }
  await handleOpenDefaultData(listTree)
}
const openEdit = async (row: any, listTree: any) => {
  showModal()
  setModalTitle('修改部门')
  Object.assign(form, row)
  await handleOpenDefaultData(listTree)
}
defineExpose({ openAdd, openEdit })
const emit = defineEmits(['submit-success'])
/** 提交按钮 */
const submitForm = async () => {
  try {
    await formRef.value?.validate()
    showLoading()
    if (form.deptId) {
      await ApiSysDept.update(form)
    } else {
      await ApiSysDept.save(form)
    }
    ModalUtil.msgSuccess('操作成功')
    hideModal()
    emit('submit-success')
  } finally {
    hideLoading()
  }
}
/** Modal Open 处理默认数据 */
const handleOpenDefaultData = async (listTree: any) => {
  // 获取部门列表
  deptOptions.value = listTree
}

const formItems = ref([
  {
    prop: 'parentId',
    label: '上级部门',
    slot: 'slot-parentId',
    attrs: {
      placeholder: '请输入上级部门'
    }
  },
  {
    prop: 'deptName',
    label: '部门名称',
    attrs: {
      placeholder: '请输入部门名称'
    }
  },
  {
    prop: 'sortNum',
    label: '显示排序',
    slot: 'el-input-number',
    attrs: {
      placeholder: '请输入显示排序',
      min: 0
    }
  },
  {
    prop: 'leader',
    label: '负责人',
    slot: 'slot-leader'
    // attrs: {
    //   placeholder: '请输入负责人'
    // }
  },
  {
    prop: 'phone',
    label: '联系电话',
    attrs: {
      placeholder: '请输入联系电话'
    }
  },
  {
    prop: 'email',
    label: '邮箱',
    attrs: {
      placeholder: '请输入邮箱'
    }
  },
  {
    prop: 'status',
    label: '状态',
    slot: 'agel-radio',
    attrs: {
      border: true,
      options: sys_normal_disable
    }
  }
])

</script>

<template>
  <!-- 添加或修改对话框 -->
  <el-dialog
    :title="modalTitle"
    v-model="modalVisible"
    width="50%"
    top="5vh"
    @close="closeCancel"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-form
      ref="formRef"
      v-loading="loading"
      :model="form"
      :rules="formRules"
      label-width="160px"
      label-position="right"
    >

      <AgelFormDesc :items="formItems" border :column="1">
        <template #slot-parentId>
          <el-tree-select
            v-model="form.parentId"
            :data="deptOptions"
            :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
            value-key="deptId"
            placeholder="选择上级部门"
            check-strictly
            default-expand-all
          />
        </template>
        <template #slot-leader>
          <SelectUser v-model="form.leader" />
        </template>
      </AgelFormDesc>

      <!--      <el-form-item label="上级部门" prop="parentId">-->
      <!--        <el-tree-select-->
      <!--          v-model="form.parentId"-->
      <!--          :data="deptOptions"-->
      <!--          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"-->
      <!--          value-key="deptId"-->
      <!--          placeholder="选择上级部门"-->
      <!--          check-strictly-->
      <!--          default-expand-all-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="部门名称" prop="deptName">-->
      <!--        <el-input v-model="form.deptName" placeholder="请输入部门名称" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="显示排序" prop="orderNum">-->
      <!--        <el-input-number v-model="form.sortNum" controls-position="right" :min="0" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="负责人" prop="leader">-->
      <!--        <DeptSelectUser v-model="form.leader" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="联系电话" prop="phone">-->
      <!--        <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="邮箱" prop="email">-->
      <!--        <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="部门状态">-->
      <!--        <el-radio-group v-model="form.status">-->
      <!--          <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value" border>{{ dict.label }}</el-radio>-->
      <!--        </el-radio-group>-->
      <!--      </el-form-item>-->

    </el-form>

    <!-- 底部按钮 -->
    <template #footer>
      <div class="flex-center width-full">
        <el-button @click="closeCancel">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm">提交</el-button>
        <!--        <el-button-->
        <!--          :loading="formLoading"-->
        <!--          plain-->
        <!--          type="primary"-->
        <!--          @click="submitForm"-->
        <!--          style="position: absolute; right: var(&#45;&#45;el-padding)"-->
        <!--        >-->
        <!--          提交并关闭-->
        <!--        </el-button>-->
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
